<script setup>
    // 已从全局组件导入
    // import GoodsItem from '@/views/Home/components/GoodsItem.vue'
    import {useUserStore} from '@/stores/user.js'
    import {getLikeAPI} from '@/network/user.js'
    import { ref, onMounted } from 'vue';
    const {userInfo} = useUserStore()
    // console.log(userInfo);
    const Like = ref([])
   async function getLike() {
        const res = await getLikeAPI(8)
        // console.log(res);
        Like.value = res.result
    }

    onMounted(() => {
        getLike()
    })
</script>


<template>
    <div class="user-info">
        <div class="head">
            <div class="user-left">
                <div class="head-sculpture">
                    <img :src="userInfo.avatar" alt="">
                </div>
                <h4>{{userInfo.account}}</h4>
            </div>
            <div class="user-right">
                <a href="javascript:;">
                    <span class="iconfont icon-hy"></span>
                    <p>会员中心</p>
                </a>
                <a href="javascript:;">
                    <span class="iconfont icon-aq"></span>
                    <p>安全设置</p>
                </a>
                <a href="javascript:;">
                    <span class="iconfont icon-dw"></span>
                    <p>地址管理</p>
                </a>
            </div>
        </div>
        <div class="like-container">
            <div class="header">
                <h4>猜你喜欢</h4>
            </div>
            <div class="goods">
                <good v-for="item in Like" :key="item.id" :good="item"></good>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .user-info{
       
        
        .head{
            display: flex;
            height: 132px;
            background: url("@/assets/images/center-bg.png") no-repeat left top/100%;
            .user-left{
                display: flex;
                align-items: center;
                flex: 1;
                .head-sculpture{
                    width: 85px;
                    height: 85px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-left: 60px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }

                h4{
                    margin-left: 26px;
                    font-size: 18px;
                    color: #fff;
                    font-weight: normal;
                }
            }

            .user-right{
                display: flex;
                flex: 1;
                align-items: center;
                justify-content: space-around;
                a{
                    font-size: 16px;
                    color: #fff;
                    text-align: center;
                    span{
                        font-size: 32px;
                    }
                }
            }
        }

        .like-container{
            padding: 0 20px;
            padding-top: 20px;
            .header{
                padding: 18px 0;
                border-bottom: 1px solid #f5f5f5;
                h4{
                    font-size: 22px;
                    font-weight:normal;
                }
            }
            .goods{
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
            }
        }
    }
</style>